<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/>
    <link rel="stylesheet" href="../../css/pop-ups.css"/>

    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>语音研报</title>
    <style>

        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 1;
        }

        .stock-list-head {
            height: 3.6rem;
            width: 7.5rem;
        }

        .stock-list-img {
            min-height: 3.6rem;
        }

        .stock-list-img img {
            width: 100%;
            height: 3.6rem;
        }

        .stock-list-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 3.6rem;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .stock-list-wrap {
            background: rgba(255, 255, 255, 1);
        }

        .stock-list-item {
            padding: 0 0.32rem;
        }

        .stock-list-date {
            color: #222222;
            padding-top: 0.24rem;
        }

        .stock-list-content {
            padding: 0.28rem 0;
            border-bottom: 1px solid #f6f6f6;
        }

        .stock-list-listen {
            height: 0.6rem;
            width: 0.6rem;
            line-height: 0.7rem;
        }

        .stock-list-title {
            color: #222222;
            line-height: 0.4rem;
        }

        .stock-list-label {
            margin-top: 0.16rem;
            color: rgba(34, 34, 34, 0.45)
        }


        .stock-list-bar {
            width: 0.25rem;
            height: 0.25rem;
        }

        .stock-list-s {
            color: #FF9523;
        }


    </style>
</head>
<body>

<div class="flex-column h-100-p">
    <!--状态栏-->
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>

            <div class="right-bar"></div>
            <!--<div class="right-bar" style="color: #FFFFFF;" onclick="dealShare()">-->
            <!--    <span class="iconfont iconfenxiang1 fs16"></span>-->
            <!--</div>-->
        </div>
    </div>

    <div class="flex-1 mescroll" id="mescroll">

        <div class="stock-list-head pos-r">
            <div class="stock-list-img"><img src="../../images/home/home-jrgs.png"></div>
        </div>

        <div class="pos-r">
            <div class="flex-row justify-content-center align-items-center"></div>
            <div class="stock-list-wrap"></div>
        </div>
    </div>

    <div class="pos-f" style="width:7.5rem;background-color: white;bottom:0;display:none">
        <div style="width:7.18rem;margin-left:0.16rem;">
            <div class="flex-row align-items-center"
                 style="padding:0.26rem 0.16rem;background-color: #F4F4F4;border-radius:2px;">
                <div style="height:100%;width:0.3rem;">
                    <span class="iconfont iconguanbi fs10" style="color: #979797;"></span>
                </div>
                <div class="line1 flex-1 fs15 c-222">语音研报｜固收市场固收市场观点2020固收市场观点2020固收市场观点2020观点2020.6.1-6.7</div>
                <div class="flex-row align-items-center justify-content-center ml5"
                     style="box-sizing:border-box;height:0.52rem;width:0.52rem;border-radius: 10rem;border: 1px solid #DADADA">
                    <span class="iconfont icon1-1 fs12" style="color: #FF9523;"></span>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>
  let pm = {
    pageNum: 1,
    pageSize: 10,
    isScroll: true,
    title: '语音研报',
    time: '',
    isFirst: true,
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    pm.infoId = params.infoId
    pm.infoType = params.infoType

    pageScroll()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageSize,
      downCallback: refreshAchive, //下拉刷新入口
      upCallback: getStockList //滚动加载入口
    })
  }

  function startPage() {
    // 对正在播放的item添加动画
    setPlaying()
  }

  function reLoadPage() {
    refreshAchive()
  }

  function refreshAchive() {
    pm.isFirst = true
    pm.pageNum = 1
    getStockList()
  }

  function getStockList() {
    Server.stockList.getStockList({
      pageNum: pm.pageNum,
      pageSize: pm.pageSize,
      funcCode: '100001001'
    }).then(function (data) {
      console.log(data,'data')
      let htmlStr = ''
      if (data.data && data.data.length > 0) {
        data.data.forEach(function (item) {
          htmlStr += '<div class=\'stock-list-item\'  >'
          if (pm.isFirst || pm.time !== item.issuerDttmStr.substring(0, 10)) {
            pm.isFirst = false
            pm.time = item.issuerDttmStr.substring(0, 10)
            htmlStr += '<div class=\'stock-list-date\'>'
            htmlStr += '<span class=\'fs30 ff800\'>' + parseInt(item.issuerDttmStr.substring(8, 10)) + '</span>'
            htmlStr += '<span class=\'fs11 ml5\'>/' + parseInt(item.issuerDttmStr.substring(5, 7)) + '  月</span>'
            htmlStr += '</div>'
          }
          htmlStr += '<div class=\'stock-list-content flex-column\' onclick=\'goStockDetail("' + item.voiceId + '","' + item.infoType + '",this)\'  >'
          htmlStr += '<div class=\'flex-row\' id="' + item.voiceId + '">'
          htmlStr += '<div class=\'stock-list-listen\'>'
          htmlStr += '<span class=\'iconfont iconerji fs20 c-222\'></span>'
          htmlStr += '</div>'

          htmlStr += '<div class=\'flex-column flex-1 ml15\'>'
          htmlStr += '<div class=\'stock-list-title line2 fs15\'>' + item.title + '</div>'
          htmlStr += '<div class=\'stock-list-label flex-row fs11 justify-content-between align-items-center\'>'
          htmlStr += '<div class=\'flex-row align-items-center\'>'
          htmlStr += '<div>时长 ' + item.voiceDuration + '</div>'
          htmlStr += '<div class="ml22 readCnt_' + item.voiceId + '"><span>' + item.readCnt + '</span>人听过</div>'
          htmlStr += '</div>'

          htmlStr += '<div class=\'stock-list-line flex-row align-items-center\' style=\'display: none\'>'
          htmlStr += '<img class="stock-list-bar"   src="../../images/home/play.gif" />'
          htmlStr += '</div>'

          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          htmlStr += '</div>'
        })
      }
      if (pm.pageNum === 1) {
        $('.stock-list-wrap').html(htmlStr)
      } else {
        $('.stock-list-wrap').append(htmlStr)
      }
      // 对正在播放的item添加动画
      setPlaying()
      pm.pageNum++

      //下拉刷新结束回调
      meScroll.endSuccess(data.data.length, data.data.length === pm.pageSize)
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  // 给正在播放的item添加播放动画
  function setPlaying(isSuccess, voiceId) {

    function showPlaying(id) {
      let parent = $(`#${id}`)
      $('.stock-list-line').hide()
      $('.stock-list-title').removeClass('stock-list-s')

      parent.find('.stock-list-line').show()
      parent.find('.stock-list-title').addClass('stock-list-s')
    }

    if (isSuccess && voiceId) {
      showPlaying(voiceId.data)
    } else {
      jsBridge.getPlayingItem().then(({id}) => showPlaying(id)).catch(() => $('.stock-list-line').hide())
    }
  }

  // 跳转原生音频详情
  function goStockDetail(infoId, infoType, o) {
    //处理列表阅读数
    let dom = $('.readCnt_' + infoId + ' span')
    let rt = dom.html()
    dom.html(parseInt(rt) + 1)
    jsBridge.callBridge('openBrsDetail', {infoId: infoId, infoType: infoType})
  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(255,255,255)'
      })
      $('.right-bar').css({
        'color': 'rgb(255,255,255)'
      })
    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
      $('.right-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })
  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    //需要特殊处理的滚动区域，需要放在scroller元素区域内
    $('.mescroll').scroll(function () {
      let scrollTop = $(this).scrollTop()

      dealHead(scrollTop)

    })
  }


  function dealShare() {
    let item = {
      title: 'title',
      content: 'content',
      url: dict.SHARE_HOST + 'app/common/index.html#/index?id=' + pm.infoId + '&type=' + pm.infoType + '&version=' + dict.version,
      image: 'image',
      type: 'url'
    }
    Template.shareWindow(item)
  }


</script>
</html>
